<template>
  <a-modal
    :title="formConfig.title"
    v-model:visible="visible"
    width="800px"
    center
  >
    <a-form ref="formRef" v-if="visible" :model="formObj">
      <a-row>
        <a-col
          :span="item.span || 24"
          :key="item.name"
          v-for="item in formConfig.items"
        >
          <a-form-item :label="item.label" :rules="item.rules">
            <!--根据type来显示是控件-->
            <a-input
              v-if="item.type === 'hidden'"
              v-model:value="formObj[item.name]"
              type="hidden"
            ></a-input>
            <a-input
              v-if="item.type === 'input'"
              v-model:value="formObj[item.name]"
              :placeholder="item.placeholder || `请输入${item.label}`"
              :disabled="item.disabled"
              allow-clear
            ></a-input>
            <a-input
              v-if="item.type === 'password'"
              v-model:value="formObj[item.name]"
              :placeholder="item.placeholder || `请输入${item.label}`"
              type="password"
            ></a-input>
            <a-select
              v-else-if="item.type === 'select'"
              v-model:value="formObj[item.name]"
              :placeholder="item.placeholder || `请选择${item.label}`"
              :disabled="item.disabled"
            >
              <template v-for="(option, i) in item.options">
                <a-select-opt-group
                  v-if="!!option.children"
                  :key="`form_${option.label}${i}`"
                >
                  <template #label>
                    {{ option.label }}
                  </template>
                  <a-select-option
                    v-for="(item, j) in option.children"
                    :key="`form_${item.value}_${j}`"
                    :value="item.value"
                    >{{ item.label }}</a-select-option
                  >
                </a-select-opt-group>
                <a-select-option
                  v-else
                  :key="`form_${option.value}_${i}`"
                  :value="option.value"
                  >{{ option.label }}</a-select-option
                >
              </template>
            </a-select>
            <a-input-number
              v-else-if="item.type === 'number'"
              v-model:value="formObj[item.name]"
              :placeholder="item.placeholder || `请输入${item.label}`"
              :disabled="item.disabled"
              :min="item.min"
              :max="item.max"
            />
            <a-date-picker
              v-else-if="item.type === 'datetime'"
              v-model:value="formObj[item.name]"
              :placeholder="item.placeholder || `请选择${item.label}`"
              :disabled="item.disabled"
              :disabledDate="item.disabledDate"
            />
            <a-input
              v-else-if="item.type === 'textarea'"
              :disabled="item.disabled"
              v-model:value="formObj[item.name]"
              :rows="3"
              type="textarea"
              :placeholder="item.placeholder || `请输入${item.label}`"
            />
            <a-radio-group
              v-else-if="item.type === 'radio'"
              v-model:value="formObj[item.name]"
            >
              <a-radio
                v-for="item in item.options"
                :key="item.value"
                :label="item.value"
              >
                {{ o.label }}
              </a-radio>
            </a-radio-group>
            <a-checkbox-group
              v-else-if="item.type === 'checkbox'"
              v-model:value="formObj[item.name]"
            >
              <a-checkbox
                v-for="item in item.options"
                :key="item.value"
                :label="item.value"
                >{{ item.label }}</a-checkbox
              >
            </a-checkbox-group>
            <UploadImg
              v-else-if="item.type === 'image'"
              :img="formObj[item.name]"
              @imgUploaded="
                (img) => {
                  setFile(item.name, img);
                }
              "
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <template #footer>
      <span class="dialog-footer">
        <a-button @click="cancel(formRef)">取消</a-button>
        <a-button type="primary" @click="submit(formRef)">提交</a-button>
      </span>
    </template>
  </a-modal>
</template>
<script>
import _ from "lodash";
import { reactive, ref, toRefs } from "vue";
import UploadImg from "./UploadImg.vue";

export default {
  emits: ["submit"],
  props: {
    formConfig: {
      required: true,
      type: Object,
    },
  },
  components: { UploadImg },
  setup(props, context) {
    const formRef = ref(null);
    const formConfig = props.formConfig;

    // 根据传参构建对象
    const initObj = _.reduce(
      formConfig.items,
      (arr, o) => {
        arr[o.name] = null;
        return arr;
      },
      {}
    );

    const state = reactive({ formObj: initObj, visible: false });

    const handleOpenForm = (obj = {}) => {
      state.visible = true;
      const data = { ...initObj };
      _.forIn(obj, (value, key) => {
        if (_.hasIn(data, key)) {
          data[key] = value;
        }
      });
      state.formObj = data;
    };

    const submit = (formEl) => {
      formEl.validate().then(() => {
        context.emit("submit", { ...state.formObj });
      });
    };

    const cancel = async (formEl) => {
      state.visible = false;
      await formEl.resetFields();
    };

    const setFile = (name, img) => {
      state.formObj[name] = img;
    };

    return {
      formRef,
      ...toRefs(state),
      formConfig,
      handleOpenForm,
      submit,
      cancel,
      setFile,
    };
  },
};
</script>
<style lang="less" scoped>
:deep(.ant-form-item-label) {
  width: 64px;
}
</style>
